<template>
  <view class="normal-login-container">
    <view class="header-area">
      <view class="title background">
        <text class="title-text">供应链协同系统</text>
      </view>
      <image
        class="logo"
        src="https://glm-1324073348.cos.ap-nanjing.myqcloud.com/static/2201a960fb09474caaafa9153d6a1c651709278166768.png"
        mode="scaleToFill"
      />
      <view class="empty"></view>
    </view>
    <view class="padding">
      <text class="hello-text">你好{{ userName }}，首次登录请重置密码</text>
      <uni-forms ref="loginFormData" :model="loginForm" :rules="rules">
        <uni-forms-item name="password1">
          <uni-easyinput
            type="password"
            :inputBorder="false"
            v-model="loginForm.password1"
            placeholder="请输入新密码"
          ></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="password2">
          <uni-easyinput
            type="password"
            :inputBorder="false"
            v-model="loginForm.password2"
            placeholder="请确认新密码"
          ></uni-easyinput>
        </uni-forms-item>
      </uni-forms>
      <button
        class="login-btn cu-btn block bg-darkBlue lg round"
        @click="formSubmit"
        :loading="isloading"
        :disabled="isloading"
      >
        提 &nbsp;&nbsp;交
      </button>
      <!-- <form @submit="formSubmit">
				<view v-if="!phoneStatus" class="cu-form-group margin-top border-top">
				  <view class="title"></view>
				  <input placeholder="请输入手机号" name="phoneNum" />
				</view>
        <view class="cu-form-group border-top" :class="phoneStatus ? 'margin-top' : ''">
          <view class="title"></view>
          <input
            placeholder="请输入新密码"
            name="password"
            :password="showPassword"
          />
          <text
            class="cuIcon-attentionfill"
            :class="[!showPassword ? 'eye-active' : 'eye-deactive']"
            @click="showPassword = !showPassword"
          ></text>
        </view>
        <view class="cu-form-group border-bottom">
          <view class="title"></view>
          <input
            placeholder="请确认新密码"
            :password="showPassword2"
            name="secondPassword"
          />
          <text
            class="cuIcon-attentionfill"
            :class="[!showPassword2 ? 'eye-active' : 'eye-deactive']"
            @click="showPassword2 = !showPassword2"
          ></text>
        </view>
        <button
          class="login-btn cu-btn block bg-darkBlue lg round"
          form-type="submit"
        >
          提 &nbsp;&nbsp;交
        </button>
      </form> -->
    </view>
    <view>
      <!-- 提示窗 -->
      <view>
        <u-modal
          :show="showModal"
          title="提示"
          content="修改密码成功!"
          @confirm="dialogConfirm"
        ></u-modal>
      </view>
    </view>
  </view>
</template>

<script>
import { forceResetPwdAPI } from "@/api/login.js";
export default {
  name: "",
  data() {
    return {
      showPassword: true,
      showPassword2: true,
      userId: "",
      userName: "",
      isloading: false,
      btnDisabled: false,
      phoneStatus: false,
      loginForm: {
        password1: "",
        password2: "",
      },
      rules: {
        password1: {
          rules: [
            {
              required: true,
              errorMessage: "请输入密码",
            },
          ],
        },
        password2: {
          rules: [
            {
              required: true,
              errorMessage: "请确认密码",
            },
          ],
        },
      },
      showModal: false,
    };
  },
  created() {},
  methods: {
    // 提交
    formSubmit(e) {
      // if (this.loginForm.password1 !== this.loginForm.secondPassword2) {
      //   return this.$modal.showToast("两次密码不一致");
      // }
      // const password = [
      //   {
      //     reg: /^[a-zA-Z0-9!@#$%^&*]+$/,
      //     message: "密码只能输入数字，字母，特殊符号",
      //   },
      //   {
      //     reg: /^.{6,20}$/,
      //     message: "用户密码长度必须介于 6 和 20 之间",
      //   },
      // ];
      // for (let i = 0; i < password.length; i++) {
      //   if (!password[i].reg.test(this.loginForm.password)) {
      //     return this.$modal.showToast(password[i].message);
      //   }
      // }
      // if (!this.phoneStatus) {
      //   const phoneRegex = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
      //   if (!phoneRegex.test(this.loginForm.phoneNum)) {
      //     return this.$modal.showToast('请输入正确的手机号');
      //   }
      // }
      // this.$modal.loading("提交中，请耐心等待...");
      this.isloading = true;
      const data = {
        userName: this.userName,
        userId: this.userId,
        password: this.loginForm.password1,
      };
      // if (!this.phoneStatus) {
      //   data.phonenumber = this.loginForm.phoneNum
      // };
      const params = {
        secondPassword: this.loginForm.password2,
      };
      const token = uni.getStorageSync("firstLogin");
      forceResetPwdAPI(params, data, token)
        .then((res) => {
          this.isloading = false;
          // this.$modal.closeLoading();
          // this.showModal = true;
          // uni.showLoading({
          //   title: '修改中，请稍候...'
          // });
          setTimeout(() => {
            // uni.hideLoading();
            uni.reLaunch({
              url: "/pages/home/index",
            });
          }, 1000);
        })
        .catch(() => {
          this.isloading = false;
          // this.$modal.closeLoading();
        });
    },
    dialogConfirm() {
      // 点击确定按钮直接登录
      this.$modal.loading("登录中，请耐心等待...");
      this.$store
        .dispatch("Login", {
          username: this.userName,
          password: this.loginForm.password1,
        })
        .then(() => {
          this.$modal.closeLoading();
          // 设置用户信息
          this.$store.dispatch("GetInfo").then((res) => {
            uni.removeStorageSync("firstLogin");
            uni.reLaunch("/pages/home/index");
          });
        });
    },
  },
  computed: {},
  onLoad(options) {
    this.userId = options.userId;
    this.userName = options.userName;
    this.phoneStatus = options.phoneStatus == "false" ? false : true;
  },
};
</script>
<style scoped lang="scss">
::v-deep.u-modal__content {
  text-align: center;
}

page {
  background-color: #ffffff;
}

.normal-login-container {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;

  .header-area {
    position: relative;

    .background {
      width: 100%;
      height: 424rpx;
      background: url("https://glm-1324073348.cos.ap-nanjing.myqcloud.com/static/background.png")
        no-repeat;
      overflow: hidden;
      background-size: cover;
    }

    .logo {
      width: 164rpx;
      height: 164rpx;
      position: absolute;
      bottom: 0;
      left: calc(50% - 82rpx);
    }

    .empty {
      height: 82rpx;
      width: 100%;
      background: #fff;
    }

    .title {
      text-align: center;

      .title-text {
        font-size: 38rpx;
        color: #ffffff;
        line-height: 424rpx;
      }
    }
  }

  .padding {
    padding: 84rpx 64rpx 0;
    // .loginForm {
    // border-top: 1px solid #eee;

    ::v-deep .uni-forms-item {
      border-bottom: 2rpx solid #eee;
      margin-bottom: 0;
      height: 120rpx;
      display: flex;
      align-items: center;
      // flex-wrap: nowrap;
    }

    ::v-deep .uni-easyinput__content {
      // background-color: rgba(0,0,0,0);
      // opacity: 0;
      border-radius: 50rpx;
    }

    ::v-deep .input-placeholder {
      color: #c4cad3 !important;
    }

    ::v-deep .uni-forms-item__label {
      color: #ffffff;
    }

    .login-btn {
      margin-top: 116rpx;
      width: 600rpx;
      height: 92rpx;
      border-radius: 50rpx;
      color: #fff;
      background: #0c3190;
    }

    // }
  }

  .eye-active {
    color: #007aff;
  }

  .eye-deactive {
    color: #c4cad3;
  }

  .border-top {
    border-top: 1px solid #eee;
  }

  .border-bottom {
    border-bottom: 1px solid #eee;
  }

  .hello-text {
    font-size: 31rpx;
    background: linear-gradient(to right, #0c3190, #4a7ece);
    background-clip: text;
    color: transparent;
    font-weight: bold;
    margin-left: 30rpx;
  }

  .cu-form-group .title {
    min-width: calc(4em + 15px);
  }

  .login-btn {
    margin-top: 116rpx;
    height: 92rpx;
  }

  .forget-password {
    color: #c4cad3;
    margin-top: 31rpx;
  }

  .agreement-container {
    color: #c4cad3;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    .uni-checkbox-input {
      width: 20rpx;
      height: 20rpx;
    }

    .agreement {
      margin-left: 15rpx;
    }
  }

  .login-form-content {
    text-align: center;
    margin: 20px auto;
    margin-top: 15%;
    width: 80%;

    .input-item {
      margin: 20px auto;
      background-color: #f5f6f7;
      height: 45px;
      border-radius: 20px;

      .icon {
        font-size: 38rpx;
        margin-left: 10px;
        color: #999;
      }

      .input {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        text-align: left;
        padding-left: 15px;
      }
    }

    .reg {
      margin-top: 15px;
    }

    .login-code {
      height: 38px;
      float: right;

      .login-code-img {
        height: 38px;
        position: absolute;
        margin-left: 10px;
        width: 200rpx;
      }
    }
  }
}
</style>
